/////////////////////////////////////////////////////////////////
// Script para la interfaz de usuario en la vista homeView.php //
/////////////////////////////////////////////////////////////////
(function($){

    //Se invoca a la función integrationMenuTabs() que es la encargada de hacer la integración del menú del proyecto wijmo (wijmenu) con las pestañas de jQuery-ui (Tabs). Se le pasa como parametro un valor null para que haga la carga inicial de las pestañas.
    //wijmenu -> http://wijmo.com/widgets/wijmo-open/menu/
    //Tabs jquery-ui -> http://jqueryui.com/demos/tabs/

    integrationMenuTabs(null);
    $.post("home/getHomeForRole", {}, function(response){
        if(response.tabHome !== '')
            integrationMenuTabs(response.tabHome);        
        if(response.tabsOpen !== 0){
            var tabsOpen = response.tabsOpen;
            for (var i = 0; i < tabsOpen.length; i++) {
                var tab = tabsOpen[i];
                for (property in tab) {
                    if(property === "id")
                        integrationMenuTabs(tab[property]);
                }
            }
        }
    },"json");

    //Se carga el menú del proyecto wijmo (wijmenu) en la lista no ordenada (<ul>) con el id #m3nu, la cual es construida automaticamente por el método displayMenu() del controller home.php en la view home.php.
    //Se hace uso de la función callback select() la cual se ejecuta automaticamente despues que el usuario selecciona un item del menú.
    $("#m3nu").wijmenu({
        orientation: "horizontal",
        select: function(e,data){
            integrationMenuTabs(data.item.attr('id'));
        }
    });

    //Uso del metodo next() del wijmenu para hacer que el item inicial (Inicio) aparezca seleccionado por defecto.
    $("#m3nu").wijmenu("next");

    //Esta función hace el trabajo de integración del menú del proyecto wijmo (wijmenu) con las pestañas de jQuery-ui (Tabs).
    function integrationMenuTabs(idItem){
        if(idItem == null){
            //Carga inicial de las pestañas usando el widget Tabs de Jquery-ui
            var $tabs = $('#tabs').tabs({ fx: {opacity: 'toggle', duration: 'fast'} });

            //Uso de la función live() de jQuery para que al "clickear" el ícono de cerrar se remueva la pestaña dinamicamente.
            $('#tabs .ui-tabs-nav span.ui-icon-close').live('click', function() {
                var index = $('li',$tabs).index($(this).parent());
                $tabs.tabs('remove', index);
            });
            $tabs.find(".ui-tabs-nav").sortable({axis:'x'});
        }
        else{
            //Uso de la función ajax() de jquery para traer por ajax los datos necesarios desde el servidor para cargar las pestañas correspondiente a los items del menú.
            $.ajax({
	        type: 'post',
                dataType: 'json',
	        async:false,
                url: 'home/getTabForOption',
                data: {"idItem": idItem},
	        success:  function(data){
                    return tabForOption=data;
                }
            });
            //Solo en caso que no sea un item padre o un item que no necesite abrir una pestaña se va a abrir la pestaña correspondiente...
            if(typeof tabForOption.id != 'undefined' && tabForOption.href == null && tabForOption.hijos == null){
                if(tabForOption.url_tab_content !== null){
                    var $tabs = $('#tabs').tabs({
                        tabTemplate: '<li><a href="#{href}">#{label}</a><span class="ui-icon ui-icon-close">Cerrar Tab</span></li>',
                        add: function(event, ui){
                            $.post(tabForOption.url_tab_content,{},function(contenido){
		                var tabContenido = contenido;
		                $(ui.panel).append(tabContenido);
		                $tabs.tabs('select', '#' + ui.panel.id);
	                    });
                        },
                        remove: function(event, ui) {
                            //$("#"+ui.panel.id).remove();
                        }
                    });

                    //Aquí se verifica si el usuario esta tratando de crear una pestaña que ya fue creada (Por ejemplo seleccionando dos veces seguidas la misma opción del menú).
                    //Si no ha sido creada la pestaña o si fue creada y posteriormente cerrada, se procede a crearla nuevamente y en caso de que esta necesite estar ubicada en una posición específica del panel se ubica en tal posición.
                    if ($('#tab-'+tabForOption.id).text() == ''){
                        (tabForOption.tab_index == null) ? $tabs.tabs('add', '#tab-'+tabForOption.id, tabForOption.nombre) : $tabs.tabs('add', '#tab-'+tabForOption.id, tabForOption.nombre, tabForOption.tab_index);

                    }

                    //De lo contrario si la pestaña ya esta creada y permanece en el panel entonces se selecciona.
                    else
                        $tabs.tabs('select', '#tab-'+tabForOption.id);
                }
            }
        }
    }
})(jQuery);
